import style from "./index.module.css";
import { Carousel, Card, Row, Col } from "antd";

export default function Home() {
  const carouselImages = [
    "http://localhost:9000/tempfilebucket/b215f4c7c82c4522901122410d1d729a.jpg",
    "http://localhost:9000/tempfilebucket/526f5c7fe5df4531b89b61fc8c5cc81a.jpg",
    "http://localhost:9000/tempfilebucket/eb81e93bacb4448b9346bfae44ed0047.jpg",
    "http://localhost:9000/tempfilebucket/c0767a0be42e45d694959c1c47c5dc0b.jpg",
  ];

  const gameList = [
    {
      id: 1,
      title: "Cyberpunk 2077",
      description: "A futuristic open-world RPG set in Night City.",
      releaseDate: "2023-10-01 00:00:00",
      userId: 3,
      price: 60,
      priceD: 30,
      coverImage:
        "http://localhost:9000/tempfilebucket/8b47aa8de19b47368faa014eb87bbf1a.jpg",
      status: 0,
      categories: null,
      gameInfo: null,
    },
    {
      id: 2,
      title: "The Witcher 3: Wild Hunt",
      description:
        "Epic fantasy RPG with monster hunting and rich storytelling.",
      releaseDate: "2022-03-15 00:00:00",
      userId: 3,
      price: 40,
      priceD: null,
      coverImage:
        "http://localhost:9000/tempfilebucket/163bea23c4ed4769b9c52819a7d509cd.jpg",
      status: 0,
      categories: null,
      gameInfo: null,
    },
    {
      id: 4,
      title: "Elden Ring",
      description: "Dark fantasy action RPG with challenging combat.",
      releaseDate: "2022-02-25 00:00:00",
      userId: 4,
      price: 60,
      priceD: 50,
      coverImage:
        "http://localhost:9000/tempfilebucket/19c5e916fbbd40a685f61e00f0734fb1.avif",
      status: 0,
      categories: null,
      gameInfo: null,
    },
    {
      id: 7,
      title: "Red Dead Redemption 2",
      description: "Western-themed action-adventure with a vast open world.",
      releaseDate: "2023-07-18 00:00:00",
      userId: 6,
      price: 50,
      priceD: 30,
      coverImage:
        "http://localhost:9000/tempfilebucket/ce76bd48d66d4c9c9973eebb5ce6fe34.webp",
      status: 0,
      categories: null,
      gameInfo: null,
    },
    {
      id: 11,
      title: "Terraria",
      description: "一款2D开放的沙盒、建造、生存、冒险、RPG游戏！",
      releaseDate: "2025-04-04 09:00:00",
      userId: 1,
      price: 41,
      priceD: 0,
      coverImage:
        "http://localhost:9000/tempfilebucket/6d35dd781e434a7d949b961bc11f41b4.webp",
      status: 0,
      categories: null,
      gameInfo: null,
    },
  ];

  return (
    <div className={style.homeContainer}>
      <h2 className={style.sectionTitle}>热门推荐</h2>

      {/* 热门推荐轮播区 */}
      <section className={style.section}>
        <Carousel
          autoplay
          effect="fade"
          autoplaySpeed={5000}
          className={style.carousel}
          dots={{ className: style.customDots }}
        >
          {carouselImages.map((item) => (
            <div key={item} className={style.carouselItem}>
              <Card
                hoverable
                cover={
                  <img
                    alt="推荐内容"
                    src={item}
                    className={style.carouselImage}
                  />
                }
              >
                <Card.Meta
                  title={`热门推荐 ${item}`}
                  description="点击查看详情"
                />
              </Card>
            </div>
          ))}
        </Carousel>
      </section>

      {/* 游戏排行榜 */}
      <section className={style.section}>
        <h2 className={style.sectionTitle}>游戏排行榜</h2>
        <Row gutter={[16, 16]}>
          {gameList.map((item) => (
            <Col xs={24} sm={12} md={8} lg={6} xl={4} key={item.id}>
              <Card
                hoverable
                className={style.gameCard}
                cover={
                  <img src={item.coverImage} className={style.gameImage} />
                }
              >
                <div className={style.gameRank}>{item.title}</div>
                <Card.Meta
                  title="Clash of Clans"
                  description={
                    <>
                      <p className={style.gameDesc}>
                        Xhattmahs is not attacking your base!
                      </p>
                      <span className={style.gameTime}>12分钟前</span>
                    </>
                  }
                />
              </Card>
            </Col>
          ))}
        </Row>
      </section>
    </div>
  );
}
